<template>
  <div>
    <div class="header-btn">
      <div>创建活码</div>
      <div>
        <el-button type="primary" v-if="$route.query.particulars !== 3" @click="addOrUpdateTask">确认</el-button>
        <el-button type="info" plain @click="goBack">返回</el-button>
      </div>
    </div>
    <div class="wrap g-card" style="margin-bottom: 20px">
      <div class="title-header">拉群方式</div>
      <el-form label-width="120px" label-position="right">
        <el-form-item label="拉群方式" required>
          <el-radio-group v-model="form.groupWays" @change="groupWaysChange" :disabled="$route.query.id">
            <el-radio label="1">企微活码拉群</el-radio>
            <el-radio label="2">个人群活码拉群</el-radio>
            <el-radio label="3">标签拉群</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <!-- 1：企微活码拉群；2：个人群活码拉群；3：标签拉群 -->
    <div v-show="+form.groupWays === 1">
      <div class="wrap g-card" style="margin-bottom: 20px">
        <div class="title-header">基础信息</div>
        <el-form :model="form" :rules="rules" ref="form" label-width="120px" label-position="right"
          style="position: relative">
          <el-form-item label="二维码名称" prop="activityName">
            <el-input v-if="this.$route.query.particulars !== 3" popper-class="minWidth-inp" style="width: 400px"
              placeholder="名称不会展示给用户，用于企业记录渠道名称或使用场景" v-model="form.activityName">
            </el-input>
            <div v-if="this.$route.query.particulars === 3 && this.$route.query.id">
              {{ form.activityName }}
            </div>
          </el-form-item>
          <el-form-item label="使用人员" prop="userId">
            <el-select v-model="form.userId" :disabled="$route.query.particulars == 3" placeholder="请选择" clearable>
              <el-option v-for="item in userervice" :key="item.userId" :label="item.userName"
                :value="item.userId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="打标签" prop="tagVOS">
            <tag-group v-model="form.tagVOS" :disabled="$route.query.particulars === 3" />
          </el-form-item>
          <el-form-item label="分组" prop="categoryId">
            <el-select v-model="form.categoryId" placeholder="请选择" v-if="this.$route.query.particulars !== 3">
              <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
            <div v-if="this.$route.query.particulars === 3 && this.$route.query.id">
              {{ form.categoryName }}
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="wrap g-card" style="margin-bottom: 20px">
        <div class="title-header">设置群消息</div>
        <el-form label-width="120px" label-position="right">
          <el-form-item>
            <div v-if="this.$route.query.particulars === 3">
              {{ form.guide }}
            </div>
            <div class="markedWords" v-else>
              入群人数统计后：扫描活码即认为客户人群，扫码人数会与实际扫企业微信码入群人数有偏差
            </div>
          </el-form-item>
          <el-form-item label="企微活码">
            <div>
              <div class="groupContent" v-for="(item, i) in addinggroup" :key="i">
                <div class="groupContent-button">
                  <el-button @click="Openpopover(i, item)" v-if="$route.query.particulars !== 3" class="button-new-tag"
                    size="small" style="height: 30px" v-model="form.weUserId">
                    <svg-icon icon-class="add" /> 选择群聊
                  </el-button>
                  <el-form-item label="群人数上限" required>
                    <el-input-number v-model="item.scanCodeTimesLimit" :disabled="item.maxPeopleBool" :max="200" :min="1"
                      popper-class="minWidth-inp" style="width: 150px" size="mini" placeholder="请输入" />
                  </el-form-item>
                  <el-button v-if="$route.query.particulars !== 3" @click="delGroupItem(i)" type="primary"
                    icon="el-icon-delete" size="mini" style="margin-left: 50px;">删除</el-button>
                </div>
                <div class="groupContent-img">
                  <div class="block" v-if="item.groupName">
                    {{ item.groupName }}
                  </div>
                </div>
              </div>
            </div>
            <div v-if="$route.query.particulars != 3" class="groupContent-buttons" style="margin-top:0">
              <el-button class="button-new-tag" size="small" style="height: 30px" v-model="form.weUserId"
                @click="addition">
                <svg-icon icon-class="add" /> 添加群聊
              </el-button>
            </div>
          </el-form-item>
          <el-form-item label="群人数不足预警">
            <div class="markedWords" style="margin-top: 0;">
              <div>
                <p>
                  <i class="el-icon-warning"></i>
                  若群聊添加人数不足，则企微发送消息给使用人员
                </p>
                群人数不足：
                <el-input-number v-model="form.warningCount" :disabled="$route.query.particulars == 3" :min="1"
                  popper-class="minWidth-inp" style="width: 150px" size="mini" placeholder="请输入" />
                人时发送预警消息
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <MakeLabel :visible.sync="tagVisibles" :label.sync="tags" @confirm="handleAddTag"></MakeLabel>
    </div>
    <div v-show="form.groupWays > 1">
      <div class="wrap g-card" style="margin-bottom: 20px">
        <div class="title-header">基础信息</div>
        <el-form :model="form" :rules="rules" ref="form" label-width="120px" label-position="right"
          style="position: relative">
          <el-form-item label="二维码名称" prop="activityName">
            <el-input v-if="this.$route.query.particulars !== 3" popper-class="minWidth-inp" style="width: 400px"
              placeholder="名称不会展示给用户，用于企业记录渠道名称或使用场景" v-model="form.activityName">
            </el-input>
            <div v-if="this.$route.query.particulars === 3 && this.$route.query.id">
              {{ form.activityName }}
            </div>
          </el-form-item>
          <el-form-item label="使用人员" prop="userId">
            <el-select v-model="form.userId" :disabled="!!this.$route.query.id" placeholder="请选择">
              <el-option v-for="item in userervice" :key="item.userId" :label="item.userName" :value="item.userId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="打标签" prop="groupTag">
            <tag-group v-model="form.tagVOS" :disabled="!!this.$route.query.id" />
          </el-form-item>
          <el-form-item v-if="form.groupWays == 3" label="目标标签人群" prop="tagNames">
            <!-- <el-cascader v-if="!this.$route.query.id" v-model="form.tagNames" @change="targetTagVOSChange"
              :options="tagGroupArr" :props="{ multiple: true, emitPath: true, label: 'value' }" :show-all-levels="false"
              clearable style="width: 400px"></el-cascader> -->
            <el-select v-if="!this.$route.query.id" v-model="form.tagNames" multiple placeholder="请选择">
              <el-option v-for="item in tagGroupArr" :key="item.groupName" :label="item.groupName" :value="item.groupName">
              </el-option>
            </el-select>
            <div v-else>
              <el-tag :key="index" v-for="(tag, index) in form.tagNames">
                <!-- {{ tag.groupName }}:{{ tag.tagName }} -->
                {{ tag }}
              </el-tag>
            </div>
          </el-form-item>
          <el-form-item label="分组" prop="categoryId">
            <el-select v-if="this.$route.query.particulars !== 3" v-model="form.categoryId" placeholder="请选择">
              <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
            <div v-if="this.$route.query.particulars === 3 && this.$route.query.id">
              {{ form.categoryName }}
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="wrap g-card" style="margin-bottom: 20px">
        <div class="title-header">设置群消息</div>
        <el-form label-width="120px" label-position="right">
          <el-form-item v-show="form.groupWays == 3" label="入群引导语" prop="guide">
            <el-input v-model="form.guide" :disabled="$route.query.particulars == 3" :maxlength="200" autosize clearable
              type="textarea" placeholder="请输入" />
            <div class="markedWords" style="margin-top: 20px;" v-if="this.$route.query.particulars !== 3">
              <div>提示：</div>
              <div style="margin-left: 10px;">
                1、可以添加多个群聊，当前面的群人数打到上限后，自动发送后面的群二维码<br />
                2、群人数上限最多为200人<br />
                3、上传二维码时请【仔细核对】，群二维码和群聊【对应错误】将导致【拉群任务失败】
              </div>
            </div>
          </el-form-item>
          <el-form-item label="群聊">
            <div>
              <div class="groupContent" v-for="(item, i) in addinggroup" :key="i">
                <div class="groupContent-button">
                  <el-button @click="Openpopover(i, item)" v-if="$route.query.particulars !== 3" class="button-new-tag"
                    size="small" style="height: 30px" v-model="form.weUserId">
                    <svg-icon icon-class="add" /> 选择群聊
                  </el-button>
                  <span v-else>{{ item.groupName }}</span>
                  <el-form-item label="群人数上限" required>
                    <el-input-number v-model="item.scanCodeTimesLimit"
                      :disabled="item.maxPeopleBool || $route.query.particulars === 3" :max="200" :min="1"
                      popper-class="minWidth-inp" style="width: 150px" size="mini" placeholder="请输入" />
                  </el-form-item>
                  <el-button v-if="$route.query.particulars !== 3" @click="delGroupItem(i)" type="primary"
                    icon="el-icon-delete" size="mini" style="margin-left: 50px;">删除</el-button>
                </div>
                <div class="groupContent-img" v-if="item.groupName && $route.query.particulars !== 3">
                  {{ item.groupName }}
                </div>
              </div>
            </div>
            <div v-if="$route.query.particulars != 3" class="groupContent-buttons" style="margin-top:0">
              <el-button class="button-new-tag" size="small" style="height: 30px" v-model="form.weUserId"
                @click="addition">
                <svg-icon icon-class="add" /> 添加群聊
              </el-button>
            </div>
          </el-form-item>
          <el-form-item label="群人数不足预警">
            <div class="markedWords" style="margin-top: 0;">
              <div>
                <p>
                  <i class="el-icon-warning"></i>
                  若群聊添加人数不足，则企微发送消息给使用人员
                </p>
                群人数不足：
                <el-input-number v-model="form.warningCount" :disabled="$route.query.particulars == 3" :min="1"
                  popper-class="minWidth-inp" style="width: 150px" size="mini" placeholder="请输入" />
                人时发送预警消息
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-dialog title="选择群聊" :visible.sync="dialogTableVisible">
      <el-input placeholder="请输入群名称" suffix-icon="el-icon-search" v-model="form.input1"
        style="width: 180px; margin-bottom: 10px" @blur="getGroupLists" @change="getGroupLists">
      </el-input>
      <el-table :data="gridData" ref="multipleTable" @select="handleSelectionChange" @select-all="selectAll"
        :height="440">
        <el-table-column label="序号" type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column property="chatId" label="群ID" align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column property="groupName" label="群名称" align="center"></el-table-column>
        <el-table-column property="groupLeaderName" label="群主" align="center"></el-table-column>
        <el-table-column property="memberCount" label="群人数" align="center"></el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
        layout="total,sizes,prev, pager, next" :page-sizes="[20, 30, 50]" :page-size="pageSize" :total="pagetotal"
        style="text-align: right; margin-top: 10px">
      </el-pagination>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="determination">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getGroupList,
  addGroupCode,
  liveCodeGroupList,
  welcomList,
  uploadInterface,
  groupConfig,
  establish,
  editCreate,
} from "@/api/operate/verbalTrick";
import { getLabelAllList, groupLabel } from "@/api/label";
import { getInfo } from "@/api/login";
import { permission } from "@/api/communityOperating/personalSop.js";
import MakeLabel from "@/components/MakeLabel/index.vue";

export default {
  name: "GroupCode",
  components: { MakeLabel },
  data() {
    return {
      tagGroupArr: [],
      rules: {
        activityName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" },
        ],
        tagVOS: [{ required: true, message: "请选择标签" }],
        groupTag: [{ required: true, message: "请选择标签" }],
        userId: [{ required: true, message: "请选择使用人员", trigger: "change" }],
        categoryId: [{ required: true, message: "请选择分组", trigger: "change" }],
        tagNames: [{ required: true, message: "请选择目标标签人群", trigger: "change" }],
      },
      options: [],
      gridData: [],
      domain: window.globalConfig.IMAGE_API,
      dialogTableVisible: false,
      delivery: false,
      tagVisible: false,
      tagVisibles: false,
      fromDetail: true,
      personList: [],
      groupList: [],
      guideList: [],
      groupTotal: 0,
      groupPageNum: 1,
      groupPageSize: 20,
      pagetotal: 1,
      pageSize: 20,
      pageNum: 1,
      tags: "",
      userervice: [],
      Welcomegroup: [],
      addinggroup: [],
      subscript: null,
      form: {
        original: "",
        input1: "",
        chat_id_list: [],
        materialTag: [],
        groupWays: "1",
        userName: "",
        friendVerification: "",
        categoryId: "",
        groupId: "",
        chatIdList: "",
        tagVOS: [],
        activityName: "", //活码名称
        imgUrl: "",
        value: "",
        grouping: "",
        id: "",
        userId: "",
        guide: "",
        maxPeople: "",
        deptId: "",
        createCode: "",
        tagNames: [],
      },
      levelType: 3,
      mediaType: 2,
      rowChatid: null,
      scanCodeTimesLimit: null,
      groupName: null,
      maxPeopleBool: false,
      currentRow: null,
      choosenName: null,
    };
  },
  mounted() {
    this.getInfo();
    this.handleGetGroupList();
    this.permission();
    if (this.$route.query.id) {
      this.establish();
    }
  },
  created() {
    this.init();
    // getLabelAllList().then(res => {
    //   if (res.code === 200) this.tagGroupArr = res.data
    //   else this.$message.error(res.msg)
    // })
    groupLabel().then(res => {
      if (res.code == 200) this.tagGroupArr = res.data
      else this.$message.error(res.msg)
    })
  },
  methods: {
    delGroupItem(i) {
      this.addinggroup.splice(i, 1);
    },
    groupWaysChange() {
      this.addinggroup = []
      this.form.warningCount = ''
      this.form.targetTagVOS = []
      this.form.tagNames = []
      this.form.guide = ''
    },
    targetTagVOSChange(arr) {
      console.log(arr, this.form.tagNames);
      this.form.targetTagVOS = arr.map(item => {
        return {
          groupName: item[0],
          tagName: item[1],
        }
      })
      console.log('this.form.targetTagVOS', this.form.targetTagVOS);
    },
    Openpopover(i, row) {

      this.dialogTableVisible = true;
      this.subscript = i;
      console.log(i, row, "----------------row");
      if (row.groupName) {
        this.choosenName = row.groupName;
      }
    },
    establish() {
      const data = {
        id: this.$route.query.id,
      };

      establish(data)
        .then((res) => {
          console.log(res.data, "-------------------回显res");

          if (res.data.tagVOS) {
            res.data.tagVOS1 = JSON.parse(JSON.stringify(res.data.tagVOS))
            res.data.tagVOS = []
            res.data.tagVOS1.forEach(tagGroup => {
              tagGroup.tagName.split(',').forEach(tagName => {
                res.data.tagVOS.push({ groupName: tagGroup.groupName, tagName })
              })
            })
          }

          this.form = res.data;
          // console.log(this.form.chat_id_list, "----------this.form.chat_id_list");
          this.form.chat_id_list = [];
          // this.form.groupTag = res.data.groupTag.split(",");
          // this.form.groupWays = String(this.form.groupWays);
          this.$set(this.form, 'groupWays', String(res.data.groupWays))
          if (this.form.groupWays == "0") {
            this.form.codeUrl = this.form.codeUrl.split(",");
          } else {
            this.form.imgUrl = this.domain + res.data.codeUrl;
          }
          this.form.userId = res.data.userId;
          console.log(this.form, "------------------this.form");
          if (
            Object.keys(this.form).length > 0 &&
            this.form.weGroupList.length > 0
          ) {
            this.addinggroup = this.form.weGroupList;
            this.addinggroup.forEach((val) => {
              if (val.scanCodeTimesLimit === null) {
                val.scanCodeTimesLimit === "";
              }
            });
            this.form.weGroupList.forEach((val) => {
              if (val.chatId) {
                this.form.chat_id_list.push(val.chatId);
              }
            });

            // this.addinggroup.push({ maxPeople: "" });
          }
          // this.form.forEach((item, index) => {
          //   if (index > 0) {
          //     this.addinggroup.push({ maxPeople: "" });
          //   }
          //   this.addinggroup[index].codeUrl = item.codeUrl;
          //   this.addinggroup[index].groupName = item.groupName;
          // });

          if (this.form.friendVerification == 0) {
            this.delivery = true;
          } else if (this.form.friendVerification == 1) {
            this.delivery = true;
          } else {
            this.delivery = false;
          }
        })
        .catch((err) => { });
    },
    getInfo() {
      getInfo()
        .then((res) => {
          if (res.code === 200) {
            this.form.deptId = res.user.deptId;
            this.form.createCode = res.user.userId;
          } else {
            this.$message.error(res.msg)
          }

        })
        .catch((err) => { });
    },

    groupMembers(data, i) {
      console.log(data, "--------------data");
      console.log(this.addinggroup, "--------------this.addinggroup");
      if (data) {
        if (this.addinggroup && this.addinggroup.length > 0) {
          // var reg = /^[0-9]*$/;
          // var r = data.match(reg);
          // if (r == null) {
          // (this.form.maxPeople = ""),
          // this.$message.error("不可输入除数字以外的其他数据");
          // } else {
          // updateMemberLimit({
          //   scanCodeTimesLimit: data,
          //   chatId: this.addinggroup[this.subscript].chatId,
          // }).then((res) => {
          //   if (res.code === 200) {
          //     console.log(res, "----------------res限制人数");
          //   }
          // });
          // }
        } else {
          this.$message.error("请先选择群聊");
        }
      }
    },

    // 实现单选
    handleSelectionChange(val, row) {
      console.log(row, "-----------row");
      this.$refs.multipleTable.clearSelection(); //清除选择
      this.$refs.multipleTable.toggleRowSelection(row, true);
      // this.form.chat_id_list = [];
      // this.form.chat_id_list = Array(row.chatId);
      this.rowChatid = row.chatId;
      this.groupName = row.groupName;
      this.scanCodeTimesLimit = row.scanCodeTimesLimit;
    },
    // 清除全选
    selectAll() {
      this.$refs.multipleTable.clearSelection(); //清除选择
    },
    addition() {
      this.addinggroup.push({ scanCodeTimesLimit: "" });
    },
    permission() {
      const data = {
        authFlag: "Y",
      };
      permission(data)
        .then((res) => {
          this.userervice = res.data;
        })
        .catch((err) => { });
    },
    verification(index) {
      if (index == false) {
        this.form.friendVerification = "1";
      } else if (index == true) {
        this.form.friendVerification = "0";
      }
    },
    handleGetGroupList() {
      const params = {
        levelType: this.levelType,
        mediaType: this.mediaType,
      };
      getGroupList(params)
        .then((res) => {
          this.pageLoading = false;
          if (res.code === 200) {
            this.options = res.data;
          }
        })
        .catch(() => { });
    },
    beforeUpload(file) {
      let formData = new FormData();
      formData.append("file", file);
      uploadInterface(formData)
        .then((res) => {
          this.form.imgUrl = this.domain + res.data.url;
          this.form.original = res.data.url;
        })
        .catch((err) => { });
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.getGroupLists();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getGroupLists();
    },
    determination() {
      var valid = true;
      // 提示不能选择重复群聊
      console.log(this.addinggroup, "---------this.addinggroup");
      if (this.addinggroup.length > 1) {
        this.addinggroup.forEach((val) => {
          if (val.groupName !== this.choosenName) {
            console.log(this.rowChatid, "---------this.rowChatid");
            console.log(val.chatId, "---------chatId");
            if (
              val.groupName === this.groupName &&
              val.chatId === this.rowChatid
            ) {
              console.log("111111111111111111");
              this.$message.error("请勿选择同一个群聊");
              valid = false;
            }
          }
        });
      }

      if (valid) {
        console.log("222222222222222222222222");
        // console.log(this.form.chat_id_list, "----------this.form.chat_id_list");
        if (this.addinggroup[this.subscript].groupName) {
          this.form.chat_id_list[this.subscript] = this.rowChatid;
        } else {
          this.form.chat_id_list.push(this.rowChatid);
        }

        this.addinggroup[this.subscript].scanCodeTimesLimit =
          this.scanCodeTimesLimit;
        this.addinggroup[this.subscript].chatId = this.rowChatid;
        this.addinggroup[this.subscript].groupName = this.groupName;

        console.log(this.addinggroup, "-----------this.addinggroup");

        const data = {
          chat_id_list: [this.rowChatid],
        };
        groupConfig(data)
          .then((res) => {
            this.addinggroup[this.subscript].codeUrl = res;
            this.addinggroup[this.subscript].scanCodeTimesLimit = "";
            // this.form.chat_id_list.forEach((val) => {});
            // this.form.groupId += this.form.chat_id_list + ",";
            // this.form.groupId = this.form.groupId.slice(
            //   0,
            //   this.form.groupId.length - 1
            // );

            // 检测是否有人数上限
            // if (this.scanCodeTimesLimit) {
            //   this.addinggroup[this.subscript].maxPeopleBool = true;
            //   this.$message.error("该群已设置人数上限");
            // }
            this.dialogTableVisible = false;
          })
          .catch((err) => { });
      }
    },
    goBack() {
      this.$router.push({
        path: "liveCode?is_person=2",
      });
    },
    handleAddTag(value) {
      const arr1 = value.split(/[；;]/g);
      const arr2 = Array.from(new Set(arr1));
      if (arr1.length != arr2.length) {
        this.$message.error("有重复标签项");
        return;
      } else {
        this.form.groupTag = arr1;
        this.tagVisible = false;
        this.tagVisibles = false;
      }
      let tagList = [];
      let arr = this.form.groupTag;
      arr.forEach((item) => {
        item = String(item).replace(/^\s*|\s*$/g, "");
        if (tagList.indexOf(item) == -1 && item != "") {
          tagList.push(item);
        }
      });
      this.form.groupTag = tagList;
    },
    addTag() {
      this.tags = this.form.groupTag.join("；");
      this.tagVisible = true;
    },
    addTags() {
      this.tags = this.form.groupTag.join("；");
      this.tagVisibles = true;
    },
    handleCloseTag(tag) {
      // this.form.groupTag.splice(this.form.groupTag.indexOf(tag), 1);
    },
    addOrUpdateTask() {
      if (this.$route.query.id) {
        this.editCreate();
      } else {
        this.addGroupCode();
      }
    },

    editCreate() {
      if (!this.form.activityName) {
        this.$message.error("请输入二维码名称");
      } else if (!this.form.userId) {
        this.$message.error("使用人员不能为空");
      } else if (!this.form.tagVOS || this.form.tagVOS.length == 0) {
        this.$message.error("标签不能为空");
      } else if (!this.form.categoryId) {
        this.$message.error("分组不能为空");
      } else if (
        this.form.chat_id_list.length === 0 &&
        this.form.groupWays === "0"
      ) {
        this.$message.error("请选择群聊");
      } else if (this.addinggroup.some(item => !item.scanCodeTimesLimit)) return this.$message.error("请输入正确群人数上限");
      else if (!this.form.warningCount) return this.$message.error("请输入群人数不足预警");
      else {
        if (this.form.groupWays === "0") {
          this.form.codeUrl = "";
          // this.form.codeUrl = this.addinggroup
          //   .map((item) => item.codeUrl)
          //   .join(",");
        } else {
          this.form.codeUrl = this.form.original;
        }

        console.log(
          this.form.chat_id_list,
          "------------this.form.chat_id_list"
        );

        // 判断是否选择群聊校验
        this.form.chatIdList = "";
        this.form.groupId = "";

        if (this.form.chat_id_list.length > 0) {
          this.form.chat_id_list.forEach((val, key) => {
            if (this.form.chat_id_list.length === 1) {
              this.form.groupId = this.form.chat_id_list[0];
              this.form.chatIdList = this.form.chat_id_list[0];
            } else if (this.form.chat_id_list.length > 1) {
              key + 1 < this.form.chat_id_list.length
                ? (this.form.groupId += val + ",")
                : (this.form.groupId += val);
              key + 1 < this.form.chat_id_list.length
                ? (this.form.chatIdList += val + ",")
                : (this.form.chatIdList += val);
            }
          });
        }

        // this.form.groupTag = this.form.groupTag.join(",");
        var params = null;
        params = JSON.parse(JSON.stringify(this.form));
        // params.groupTag = this.form.groupTag.join(",");
        editCreate(params)
          .then((res) => {
            if (res.code === 200) {
              this.$message.success(res.data);
              this.$router.push({
                path: "liveCode",
              });
            }
          })
          .catch(() => { });
      }
    },
    addGroupCode() {
      // if (this.addinggroup.some(item => !item.scanCodeTimesLimit)) return this.$message.error("请输入群人数上限");
      // return
      if (this.form.groupWays == 3)
        if (!this.form.tagNames || (this.form.tagNames && this.form.tagNames.length == 0)) return this.$message.error("目标标签人群不能为空");
      // if (!this.form.targetTagVOS || this.form.targetTagVOS && this.form.targetTagVOS.length == 0) return this.$message.error("目标标签人群不能为空");

      if (!this.form.activityName) {
        this.$message.error("请输入二维码名称");
      } else if (!this.form.userId) {
        this.$message.error("使用人员不能为空");
      } else if (!this.form.tagVOS || this.form.tagVOS.length == 0) {
        this.$message.error("标签不能为空");
      } else if (!this.form.categoryId) {
        this.$message.error("分组不能为空");
      } else if (
        this.form.chat_id_list.length === 0
        // &&
        // this.form.groupWays === "0"
        // this.form.groupWays != 1
      ) {
        this.$message.error("请选择群聊");
      } else if (this.addinggroup.some(item => !item.scanCodeTimesLimit)) return this.$message.error("请输入正确群人数上限");
      else if (!this.form.warningCount) return this.$message.error("请输入群人数不足预警");
      else {
        // if (this.form.groupWays === "0") {
        //   this.form.codeUrl = "";
        //   // this.form.codeUrl = this.addinggroup
        //   //   .map((item) => item.codeUrl)
        //   //   .join(",");
        // } else {
        //   this.form.codeUrl = this.form.original;
        // }
        console.log(this.form.codeUrl, "-------------form.codeUrl");
        console.log(this.form.chat_id_list, "-------------form.chat_id_list");

        // 判断是否选择群聊校验
        this.form.chatIdList = "";
        this.form.groupId = "";

        if (this.form.chat_id_list.length > 0) {
          this.form.chat_id_list.forEach((val, key) => {
            if (this.form.chat_id_list.length === 1) {
              this.form.groupId = this.form.chat_id_list[0];
              this.form.chatIdList = this.form.chat_id_list[0];
            } else if (this.form.chat_id_list.length > 1) {
              key + 1 < this.form.chat_id_list.length
                ? (this.form.groupId += val + ",")
                : (this.form.groupId += val);
              key + 1 < this.form.chat_id_list.length
                ? (this.form.chatIdList += val + ",")
                : (this.form.chatIdList += val);
            }
          });

          this.form.weGroupList = this.addinggroup;
        }

        // this.form.groupTag = this.form.groupTag.join(",");
        var params = null;
        params = JSON.parse(JSON.stringify(this.form));
        // params.groupTag = this.form.groupTag.join(",");
        // console.log(this.form.groupTag, "----------------this.form.groupTag");
        addGroupCode(params)
          .then((res) => {
            if (res.code === 200) {
              this.$message.success(res.data);
              this.$router.push({
                path: "liveCode",
              });
            }
          })
          .catch(() => { });
      }
    },
    init() {
      this.getGroupLists();
    },
    // 群列表
    getGroupLists() {
      const data = {
        groupName: this.form.input1,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      liveCodeGroupList(data).then((res) => {
        if (res.code === 200) {
          this.pagetotal = res.total;
          this.gridData = res.rows;
        }
      });
    },
    // 引导语
    getWelcomList() {
      welcomList().then((res) => {
        if (res.code === 200) {
          const { rows } = res;
          this.guideList = rows;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/base.scss";

.header-btn {
  @include headerBtn;
}

.wrap {
  @include titleWrap;
}

.dialog-wrap {
  display: flex;
  justify-content: flex-start;

  .dialog-list {
    width: 33%;
    padding: 0 15px;
    box-sizing: border-box;
    max-height: 500px;
    overflow: auto;

    &:nth-child(2) {
      flex: 1;
      border-left: $normalBorder;
      border-right: $normalBorder;
    }
  }

  .block-wrap {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    font-weight: 600;
    color: #2a2a2a;
    font-size: 12px;
    font-family: PingFangSC-Medium, PingFang SC;

    .block-item {
      width: 80px;
      padding: 5px 0;
      margin: 10px;
      border: $normalBorder;
      text-align: center;

      .svg-icon {
        width: 4em;
        height: 3em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
      }
    }
  }

  .upload-list {
    display: flex;
    justify-content: space-between;
    border: $normalBorder;
    padding: 0 10px;
  }
}

.copy-card {
  width: 740px;
  background-color: #fafafa;
  position: relative;
  margin: 10px 0 10px 32px;

  .content-item {
    width: 400px;
    background-color: #e9e9e9;
    padding: 0 10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
  }

  .copy-edit {
    position: absolute;
    top: 20px;
    right: 20px;
  }

  .right-close {
    position: absolute;
    right: -2px;
    top: -2px;
  }
}

.markedWords {
  margin-top: 10px;
  padding: 10px;
  display: flex;
  color: #082aff;
  background-color: #fdece8;
  font-size: 13px;
}

.groupContent {
  margin: 10px 0;
  padding: 10px;
  background-color: #fdede8;
}

.groupContent-button {
  display: flex;
  align-items: center;
}

.groupContent-buttons {
  margin-top: 10px;
  margin-left: 10px;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px solid #d9d9d9;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.image-slot {
  width: 100px;
  height: 100px;
  background-color: white;
  line-height: 100px;
  color: #082aff;
  text-align: center;
  font-size: 12px;
}

.tagdetails {
  padding-left: 10px;
  padding-right: 10px;
  padding: 1px 18px;
  line-height: 15px;
  text-align: center;
  color: #082aff;
  border-radius: 3px;
  background-color: #fff4f2;
  border: 1px solid #082aff;
  margin-left: 10px;
  // color: orange;
  margin-top: 6px;
}

.particularsimg {
  display: flex;
  margin-top: 10px;
  margin-left: -20px;
}

.tooltip {
  width: 80px;
  margin: auto;
  overflow: hidden;
  flex-wrap: nowrap;
  height: 20px;
  line-height: 20px;
  text-align: center;
  text-overflow: ellipsis;
}
</style>
